<template>
  <el-dialog
    @close="sgjlCancel('sgjlRuleForm')"
    :close-on-click-modal="false"
    title="提交施工记录"
    :visible.sync="sgjlVisible"
    width="600px"
  >
    <div class="scroll-view">
      <el-form
        :model="sgjlRuleForm"
        :rules="sgjlRules"
        ref="sgjlRuleForm"
        label-position="top"
      >
        <el-form-item label="施工内容" prop="content">
          <el-input
            :rows="4"
            class="input-box"
            v-model="sgjlRuleForm.content"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否超期" prop="is_overdue">
          <el-radio-group v-model="sgjlRuleForm.is_overdue" size="small">
            <el-radio-button :label="1">是</el-radio-button>
            <el-radio-button :label="2">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="超期类型"
          prop="overdue_type"
          v-if="sgjlRuleForm.is_overdue == 1"
        >
          <el-select
            class="input-box"
            v-model="sgjlRuleForm.overdue_type"
            placeholder="请选择"
            filterable
            clearable
          >
            <el-option
              v-for="item in overdueTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="超期原因"
          prop="reason_overdue"
          v-if="sgjlRuleForm.is_overdue == 1"
        >
          <el-input
            :rows="4"
            class="input-box"
            v-model="sgjlRuleForm.reason_overdue"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="施工进度" prop="construction_progress">
          <el-select
            class="input-box"
            v-model="sgjlRuleForm.construction_progress"
            placeholder="请选择"
            filterable
            clearable
          >
            <el-option
              v-for="item in constructionProgressList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="施工阶段" prop="construction_stage">
          <el-select
            class="input-box"
            @change="constructionStageFunc"
            multiple
            v-model="sgjlRuleForm.construction_stage"
            placeholder="请选择"
            filterable
            clearable
          >
            <el-option
              v-for="item in constructionStageList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日志文件" prop="log_file">
          <el-upload
            :on-change="
              (file, fileList) => {
                sgjlChangeFile(file, fileList, 'log_file');
              }
            "
            :on-remove="
              (file, fileList) => {
                sgjlFileRemove(file, fileList, 'log_file');
              }
            "
            :auto-upload="false"
            :file-list="sgjlRuleForm.log_file"
            action="#"
            ><el-button size="small" icon="el-icon-plus">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            :rows="4"
            class="input-box"
            v-model="sgjlRuleForm.remark"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button
        type="primary"
        @click="sgjlSubmit('sgjlRuleForm')"
        :disabled="diaLoading"
        :loading="diaLoading"
        >提交</el-button
      >
      <el-button @click="sgjlCancel('sgjlRuleForm')">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import projectApi from "@/api/projectApi";
import companyApi from "@/api/companyApi";
import adminApi from "@/api/adminApi";
import { getUserInfo } from "@/utils/auth";
import foremanApi from "@/api/foremanApi";

export default {
  name: "",
  props: {
    addDialogVisible: {
      type: Boolean,
      default: false,
      required: false,
    },
    project_id: {
      required: false,
    },
    projectNodesItem: {
      required: false,
    },
  },
  data() {
    return {
      diaLoading: false,
      sgjlVisible: false,
      sgjlRuleForm: {
        content: "",
        construction_progress: "",
        is_overdue: 2,
        overdue_type: "",
        reason_overdue: "",
        construction_stage: [],
        remark: "",
        log_file: [],
      },
      sgjlRules: {
        content: [
          { required: true, message: "请输入施工内容", trigger: "change" },
        ],
        construction_progress: [
          { required: true, message: "请选择施工进度", trigger: "change" },
        ],
        is_overdue: [
          { required: true, message: "请选择是否超期", trigger: "change" },
        ],
        overdue_type: [
          { required: true, message: "请选择超期类型", trigger: "change" },
        ],
        reason_overdue: [
          { required: true, message: "请输入超期原因", trigger: "change" },
        ],
        construction_stage: [
          { required: true, message: "请选择施工阶段", trigger: "change" },
        ],
      },
      constructionProgressList: [
        {
          label: "待进场",
          value: 10,
        },
        {
          label: "施工中",
          value: 20,
        },
        {
          label: "一次预警",
          value: 30,
        },
        {
          label: "二次预警",
          value: 40,
        },
        {
          label: "已超期",
          value: 50,
        },
        {
          label: "停工中",
          value: 60,
        },
        {
          label: "已完工",
          value: 70,
        },
      ], //施工进度
      overdueTypeList: [
        {
          label: "客户原因",
          value: 1,
        },
        {
          label: "供应商原因",
          value: 2,
        },
        {
          label: "物业原因",
          value: 3,
        },
        {
          label: "城管审批",
          value: 4,
        },
        {
          label: "不可抗力",
          value: 5,
        },
        {
          label: "现场管理",
          value: 6,
        },
        {
          label: "图纸变更",
          value: 7,
        },
        {
          label: "其他原因",
          value: 8,
        },
      ], //超期类型
      constructionStageList: [
        {
          label: "围挡搭建",
          value: 1,
        },
        {
          label: "拆除清运",
          value: 2,
        },
        {
          label: "防水工程",
          value: 3,
        },
        {
          label: "水电预理",
          value: 4,
        },
        {
          label: "地面铺砖",
          value: 5,
        },
        {
          label: "新建隔墙",
          value: 6,
        },
        {
          label: "吊顶施工",
          value: 7,
        },
        {
          label: "门窗安装",
          value: 8,
        },
        {
          label: "油漆工程",
          value: 9,
        },
        {
          label: "墙板铺贴",
          value: 10,
        },
        {
          label: "柜体安装",
          value: 11,
        },
        {
          label: "柜体水电安装",
          value: 12,
        },
        {
          label: "门头广告安装",
          value: 13,
        },
        {
          label: "设备安装",
          value: 14,
        },
        {
          label: "软装及其他安装工程",
          value: 15,
        },
        {
          label: "开荒保洁",
          value: 16,
        },
        {
          label: "收尾中",
          value: 17,
        },
        {
          label: "停工",
          value: 18,
        },
      ],
    };
  },
  watch: {
    addDialogVisible(val1, val2) {
      this.sgjlVisible = this.addDialogVisible;
    },
  },
  computed: {},
  mounted() {},
  methods: {
    // 提交施工日志
    sgjlCancel(formName) {
      this.sgjlRuleForm = {
        content: "",
        construction_progress: "",
        is_overdue: 2,

        overdue_type: "",
        reason_overdue: "",
        construction_stage: [],
        remark: "",
        log_file: [],
      };
      this.$nextTick(() => {
        this.$refs[formName].clearValidate();
        this.$emit("onClose", true);
      });
    },
    sgjlSubmit(formName) {
      let sgjlRuleForm = this.sgjlRuleForm;
      let projectNodesItem = this.projectNodesItem;
      console.log(sgjlRuleForm, "施工日志参数");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.diaLoading = true;
          let formdata = new FormData();
          formdata.append(
            "data",
            JSON.stringify({
              project_id: this.project_id,
              content: sgjlRuleForm.content,
              construction_progress: sgjlRuleForm.construction_progress,
              is_overdue: sgjlRuleForm.is_overdue,
              overdue_type: sgjlRuleForm.overdue_type,
              reason_overdue: sgjlRuleForm.reason_overdue,
              construction_stage: sgjlRuleForm.constructionStageValue,
              remark: sgjlRuleForm.remark,
              node_name: projectNodesItem.node_name,
            })
          );
          sgjlRuleForm.log_file.forEach((item) => {
            formdata.append("log_file[]", item.raw);
          });
          projectApi
            .addConstructionLogs(formdata)
            .then((res) => {
              console.log(res, "提交施工日志");
              this.diaLoading = false;
              if (res.code == 200) {
                this.$emit("onSuccess", true);
              }
              this.$message({
                type: res.code == 200 ? "success" : "warning",
                message: res.code == 200 ? "处理成功" : res.message,
              });
            })
            .catch((err) => {
              this.diaLoading = false;
              this.$message({
                type: "warning",
                message: err.message,
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    sgjlChangeFile(file, list, type) {
      let sgjlRuleForm = this.sgjlRuleForm;
      sgjlRuleForm.log_file = [file];
      this.sgjlRuleForm = sgjlRuleForm;
    },
    sgjlFileRemove(file, list, type) {
      let sgjlRuleForm = this.sgjlRuleForm;
      sgjlRuleForm.log_file = list;
      this.sgjlRuleForm = sgjlRuleForm;
    },
    constructionStageFunc(e) {
      let constructionStageList = this.constructionStageList;
      let constructionStageValue = [];
      let sgjlRuleForm = this.sgjlRuleForm;
      e.forEach((item) => {
        let index = constructionStageList.findIndex((i) => {
          return item == i.value;
        });
        if (index != -1) {
          constructionStageValue.push(constructionStageList[index].label);
        }
      });
      sgjlRuleForm.constructionStageValue = constructionStageValue.join(",");
      this.sgjlRuleForm = sgjlRuleForm;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>